<!--
 * @Author: HeAo
 * @Date: 2022-01-04 17:12:09
 * @LastEditTime: 2022-01-06 19:34:44
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \teamwork\project_am-master\am-dashboard\src\pages\government\components\Bottom1.vue
 * 别乱动！
-->
<template>
  <div id="bottom1" style="height: 95%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";

import { get } from "../../../utils/request";

export default {
  data() {
    return {
      dd: [],
    };
  },
  async mounted() {
    // 4. 查询数据
    await this.loadData();
    // 5. 页面渲染的时候初始化图表
    this.initChart();
  },

  methods: {
    async loadData() {
      let url = "/dashboard/queryEngineerBindDeviceNumber";
      let resp = await get(url);
      this.dd = resp.data;
    },
    // 查询统计数据 ajax  异步的javascript和xml
    initChart() {
      const data = this.dd;

      const columnPlot = new Column("bottom1", {
        data,
        xField: "type",
        yField: "value",
        conversionTag: {},
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
      });

      columnPlot.render();
    },
  },
};
</script>
